<template>
  <div id="sendEmail">
    <div class="header">
      <div>
        发送给：
        <span><el-input v-model="email.receiver_id"></el-input></span>
        <el-button class="btn colorBtn" @click="chooseFriend">选择好友</el-button>
      </div>
      <div>
        贴邮票：
        <span :class="[stampChosen?'stampChosen':'stampNotChosen','stampPastedArea']" @click="stampDialog.visible = true">
          <img v-if="stampChosen" :src="stampUrl"/>
        </span>
      </div>
      <div>
        写标题：
        <span>
          <el-input v-model="email.title"></el-input>
        </span>
      </div>
    </div>
    <hr/>
    <div class="body">
      <div>
        <el-input type="textarea" class="wordPad" v-model="email.content"></el-input>
        <!--<textarea  >-->
        <!--</textarea>-->
        <el-button class="btn colorBtn" @click="sendEmail">发送邮件</el-button>
      </div>
    </div>
    <el-dialog v-model="stampDialog.visible" @close="closeStampDialog" @open="openStampDialog" title="邮票购买区" style="text-align: center;">
      <div class="stampsArea">
        <div class="stampInfo" v-for="(stamp,index) of stampDialog.stamps">
          <img class="stamp" :src="stamp.url"/><br/>
          <el-radio v-model="stampDialog.choice" :label="stamp">
            {{stamp.name}} {{stamp.point}}金豆
          </el-radio>
        </div>
      </div>
      <el-button class="btn colorBtn" @click="stampCommit">确定</el-button>
    </el-dialog>
  </div>
</template>
<script>
  import { Message } from 'element-ui'
  export default{
    name:'sendEmail',
    data(){
      return {
        email:{
          receiver_id:'',
          stamp_id:'',
          content:'',
          title:'',
        },
        stampUrl:'',
        stampDialog:{
          visible:false,
          choice:undefined,
          currentPage:'',
          pageSize:'',
          totalPage:'',
          stamps:[
//            {
//              url:'/static/img/stamp.9cb3ddf.png',
//              id:'5',
//              name:'邮票1',
//              point:'10',
//              description:'',
//            },
//            {
//              url:'/static/img/stamp.9cb3ddf.png',
//              id:'6',
//              name:'邮票2',
//              point:'10',
//              description:'',
//            },
//            {
//              url:'/static/img/stamp.9cb3ddf.png',
//              id:'7',
//              name:'邮票3',
//              point:'10',
//              description:'',
//            },
//            {
//              url:'/static/img/stamp.9cb3ddf.png',
//              id:'8',
//              name:'邮票4',
//              point:'10',
//              description:'',
//            },
//            {
//              url:'/static/img/stamp.9cb3ddf.png',
//              id:'8',
//              name:'邮票4',
//              point:'10',
//              description:'',
//            },
//            {
//              url:'/static/img/stamp.9cb3ddf.png',
//              id:'8',
//              name:'邮票4',
//              point:'10',
//              description:'',
//            }
          ]
        },


      }
    },
    methods:{
      chooseFriend(){

      },

      closeStampDialog(){
        this.stampDialog.choice = undefined;
      },
      openStampDialog(){
        if(this.stampDialog.stamps.length == 0){
          this.$http({
            method: 'get',
            url: 'email/listStamp',
            params: {
              page:this.stampDialog.currentPage,
              pageSize:this.stampDialog.pageSize,
            }
          }).then((response)=>{
            response = response.data;
            let data = response.object;
            if(response.status == 'SUCCESS'){
              let target = this.stampDialog;
              let source = data;
              target.currentPage = source.currentPage;
              target.pageSize = source.pageSize;
              target.stamps = source.objects;
            }
          }).catch((err)=>{

          })
        }
      },
      stampCommit(){
        if(this.stampDialog.choice){
          this.email.stamp_id = this.stampDialog.choice.id;
          this.stampUrl = this.stampDialog.choice.url;
        }
        this.stampDialog.visible = false;
      },
      sendEmail(){
        for(let p in this.email){
          if(this.email[p] == ''){
            let msg = '';
            switch (p){
              case 'receiver_id':msg = '收件人未填';break;
              case 'stamp_id':msg = '未选邮票';break;
              case 'content':msg = '邮件内容为空';break;
            }
            Message.warning(msg);
            return;
          }
        }
        this.$http({
          method: 'post',
          url: 'email/send',
          data: this.email,
        }).then((response)=>{

        }).catch((err)=>{

        });
      }
    },
    computed:{
      stampChosen(){
        return this.email.stamp_id!=='';
      }
    }
  }
</script>
<style scoped>
  .btn{
    padding: 10px 30px;
  }
  .colorBtn{
    background-color: #f85377;
    color:white;
  }
  .header>div{
    display: flex;
    padding: 10px 30px;
    align-items: center;
  }
  .inputFriend{
    height: 30px;
    padding:0px 10px;
    border: 1px solid #cacaca;
    border-radius: 15px;
  }
  .inputFriend:focus{
    outline: none;
  }
  hr{
    margin: 0px;
    border: none;
    border-bottom: 1px solid #cacaca;
  }
  .body{
    min-height: 500px;
  }
  .body>div{
    margin: 20px 40px;
    text-align: right;
    height: 100%;
  }
  .wordPad{
    width: 100%;
    padding: 10px;
    /*margin-bottom: 20px;*/
    border-color: #cacaca;
    resize: vertical;
  }
  .stampPastedArea{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px dotted #ae6973;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
  }
  .stampNotChosen{
    position: relative;
  }
  .stampNotChosen::after{
    content: '选邮票';
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    color: gray;
  }
  .stampChosen>img{
    width: inherit;
    height:inherit;
  }
  .stampsArea{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    max-height: 300px;
    margin-bottom: 10px;
    overflow: auto;
  }
  .stampInfo{
    flex-basis: 33%;
    margin-bottom: 10px;
  }
  .stamp{
    width: 100px;
    height: 100px;
  }
</style>